import logo from './logo.svg';
import './App.css';
import {Home} from './page/Home'
import React from 'react';
import {MainContext} from './context/MainContext'
import {AddHook} from './hook/AddHook'
import {useToggle} from './hook/useToggle'
import { useSelector,useDispatch } from "react-redux"
import{inscrement,decrement,addNum} from './store/modules/counterStore'
import{getAsyncUser} from './store/modules/userStore'

import {Link, useNavigate} from 'react-router-dom'

class Hello extends React.Component{

  constructor(){
    super();
    this.state = {
      name:'haha',
      count:0,
      flag:true,
      list:[2,4,6,8],
      value:'',
      pMsg:'hello'
    }
  }
  countAdd(){
    this.setState(state=>{return {count: state.count +1}})
    console.log(this.state.count)
    fetch('http://localhost:5001/pyapi/test/get').then(res=>{
      console.log(res)
      res.json().then(data=>{
        console.log(data)
      })
    })
  }

  updateFlag(){
    this.setState(state=>{return {flag: !state.flag}})
  }
  change =(e)=>{
    console.log(e.target.value)
    this.setState(state=>{return {value:e.target.value }})
  }
  updatePmsg=(data)=>{
    this.setState(state=>{return {pMsg:data }})
  }
  render(){
    const {flag,pMsg} = this.state
 
    return(
      <div>
        <MainContext.Provider value="dark">
         <AddHook></AddHook>
        <Home pMsg={pMsg} updatePmsg={this.updatePmsg}></Home>
        <p>parent pMsg: {pMsg}</p>
        <p className="red">
          name: <input type="text" value={this.state.value} onChange={this.change}></input>
        </p>
        <p>{this.state.value}</p>
        hello {this.props.name} <button onClick={this.countAdd.bind(this)}>count + 1</button>
      <button onClick={()=>this.updateFlag()}>updateFlag</button>
      <p>state: { this.state.name}</p>
      <p>state: { this.state.count}</p>
      <p>flag: { flag ? 'true': 'false'}</p>
      <p>flag: { flag ?  <span>'true'</span> : <span>'false'</span>}</p>
       <ul>
        {this.state.list.map(item=><li key={item}>{item}</li>)}
       </ul>
       </MainContext.Provider>
      </div>
    )
  }
}

function TestChild(){
  const {count} = useSelector(state => state.counter)
  return (
    <div>count:{count}</div>
  )
}

function App() {
  const {value,toggle} = useToggle()
  //  // useSelector() 用来加载state中的数据
  const {count} = useSelector(state => state.counter)
  const {user} = useSelector(state => state.user)
  // 通过useDispatch() 来获取派发器对象
  const dispatch = useDispatch()
 
  const navigate = useNavigate()
  return (
    <div className="App">
        <Link to="/goods?id=1111">跳转Goods页面</Link>

        <button onClick={()=>navigate('/me')}>跳转Me页面</button>

         {value &&  <div>show</div> }
        <button onClick={()=>toggle()}>toggle</button>
        <button onClick={()=> dispatch(getAsyncUser())}>get user</button>
        <p>{user.name} - {user.age}</p>
        <div>
          store count: {count} 
          <button onClick={()=>dispatch(addNum(2))}> +2</button>
          <button onClick={()=>dispatch(inscrement())}> ++</button>
          <button onClick={()=>dispatch(decrement())}>--</button>
        </div>
        <TestChild></TestChild>
        <Hello name="zhangsan"></Hello>
    </div>
  );
}

export default App;
